<template>
	<view class="container">
		<u-picker :show="area_show" :columns="columns" @cancel="cancel" @confirm="confirm"></u-picker>
		<view class="head">
			<u-icon @click="returnButton()" name="arrow-left" color="#fff" size="30"></u-icon>
			<u-text text="注册" color="#fff" size="22" align="center" margin="4vh 0px 0px 0px"></u-text>
		</view>
		<view class="head-2">
		</view>
		<view class="content">
			<view class="item">
				<text>负责人：</text>
				<view class="input_view">
					<u-input shape="circle" :customStyle="inputStyle" v-model="shopForm.perName"></u-input>
				</view>
			</view>
			<view class="item">
				<text>身份证号码：</text>
				<view class="input_view">
					<u-input shape="circle" :customStyle="inputStyle" v-model="shopForm.perCardid"></u-input>
				</view>
			</view>
			<view class="item">
				<text>手机号：</text>
				<view class="input_view">
					<u-input shape="circle" :customStyle="inputStyle" v-model="shopForm.perPhone"></u-input>
				</view>
			</view>
			<view class="item">
				<text>验证码：</text>
				<view class="input_view">
					<u-input shape="circle" :customStyle="inputStyle">
						<template slot="suffix">
							<view class="wrap">
								<u-toast ref="uToast"></u-toast>
								<u-code :seconds="seconds" @end="end" @start="start" ref="uCode"
									@change="codeChange"></u-code>
								<u-text @tap="getCode" :text="tips" color="#3183FB" size="13"></u-text>
							</view>
						</template>
					</u-input>
				</view>
			</view>
			<view class="item">
				<text>店名：</text>
				<view class="input_view">
					<u-input shape="circle" :customStyle="inputStyle" v-model="shopForm.storeName"></u-input>
				</view>
			</view>
			<view class="item">
				<text>工商营业执照号码：</text>
				<view class="input_view">
					<u-input shape="circle" :customStyle="inputStyle" v-model="shopForm.number"></u-input>
				</view>
			</view>
			<view class="item">
				<text>经营区域：</text>
				<view class="input_view">
					<u-input shape="circle" :customStyle="inputStyle" v-model="shopForm.area">
						<template slot="suffix">
							<u-icon name="arrow-down" @click="area_show=true"></u-icon>
						</template>
					</u-input>
				</view>
			</view>
			<view class="item">
				<text>地址：</text>
				<view class="input_view">
					<u-input shape="circle" :customStyle="inputStyle" v-model="shopForm.address"></u-input>
				</view>
			</view>
		</view>
		<view class="content ">
			<view class="item">
				<text>商家简介</text>
			</view>
			<u--textarea v-model="shopForm.intro"></u--textarea>
		</view>
		<view class="content">
			<view class="title">身份证正反面照片</view>
			<uni-file-picker @select="cardFrontChange" limit="1" ></uni-file-picker>
			<uni-file-picker @select="cardBackChange" limit="1"></uni-file-picker>

			<!-- 	<view class="item">
				<text>身份证正反面照片</text>
			</view>
			<u-upload v-model="shopForm.cardFront"></u-upload>
			<u-upload v-model="shopForm.cardBack"></u-upload> -->
		</view>
		<view class="content">
			<view class="title">门店照片</view>
			<uni-file-picker @select="handleLicenceChange" limit="1"></uni-file-picker>
		</view>
		<!-- <view class="content"> -->
			<!-- <view class="title">门店照片</view>
			<uni-file-picker @select="handleStorePhotosChange" limit="1"></uni-file-picker> -->
			<!-- <view class="item">
				<text>门店照片</text>
			</view>
			<u-upload v-model="shopForm.perCardid"  @change="handleStorePhotosChange"></u-upload> -->
		<!-- </view> -->
		<view class="bottom">
			<u-text color="#fff" size="18" align="center" line-height="6vh" text="保存" @click="modify"></u-text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopForm: {
					id: null,
					perName: "",
					perCardid: '',
					perPhone: null,
					storeName: '',
					number: null,
					area: '',
					address: '',
					intro: '',
					cardFront: '',
					cardBack: '',
					licence: '',
				},
				columns: [
					['中国', '美国', '日本']
				],
				area_show: false,
				tips: '',
				// refCode: null,
				seconds: 10,
				inputStyle: {
					height: '30rpx',
					width: '40vw'
				}
			}
		},
		onLoad(options) {
			this.shopForm.id = uni.getStorageSync("shop_id")
			this.getShop()
		},
		methods: {
			cardFrontChange(e) {
				//console.log(e);
				uni.uploadFile({
					url: '/api/file/upload',
					filePath: e.tempFilePaths[0],
					name: 'file',
					success: (res) => {
						//console.log(res.data);
						const imgUrls = JSON.parse(res.data);
						this.shopForm.cardFront = imgUrls.data.url;
						//this.selectedImg是我定义的获取文件的属性，每个用逗号隔开。
						console.log(this.shopForm.cardFront);
					},
					fail: (err) => {
						console.error("上传失败", err);
						uni.showToast({
							title: "上传失败",
							icon: "none",
						});
					},
				});
			},
			cardBackChange(e) {
				//console.log(e);
				uni.uploadFile({
					url: '/api/file/upload',
					filePath: e.tempFilePaths[0],
					name: 'file',
					success: (res) => {
						//console.log(res.data);
						const imgUrls = JSON.parse(res.data);
						this.shopForm.cardBack = imgUrls.data.url;
						//this.selectedImg是我定义的获取文件的属性，每个用逗号隔开。
						console.log(this.shopForm.cardBack);
					},
					fail: (err) => {
						console.error("上传失败", err);
						uni.showToast({
							title: "上传失败",
							icon: "none",
						});
					},
				});
			},

			handleLicenceChange(e) {
				//console.log(e);
				uni.uploadFile({
					url: '/api/file/upload',
					filePath: e.tempFilePaths[0],
					name: 'file',
					success: (res) => {
						//console.log(res.data);
						const imgUrls = JSON.parse(res.data);
						//console.log(imgUrls);
						this.shopForm.licence = imgUrls.data.url;
						//this.selectedImg是我定义的获取文件的属性，每个用逗号隔开。
						console.log(this.shopForm.licence);
					},
					fail: (err) => {
						console.error("上传失败", err);
						uni.showToast({
							title: "上传失败",
							icon: "none",
						});
					},
				});
			},
			getShop() {
				let that = this;
				this.$http({
					url: `/api/shop/manage/` + that.shopForm.id, // 接口地址
					method: "GET", // 请求方式
					success: (res) => {
						//console.log(res); // 处理成功的响应
						that.shopForm = res.data.data
					},
					fail: (err) => {
						console.error(err); // 处理失败的响应
					}
				});

			},
			modify() {
				let that = this;
				this.$http({
					url: "/api/shop/manage",
					data: that.shopForm,
					method: 'put',
					success(res) {
						console.log(res)
						uni.$u.route('/pages/ryx/merchantInformation/merchantInformation');
					},
					fail(err) {

					}
				})
			},
			returnButton() {
				uni.$u.route('/pages/ryx/merchantInformation/merchantInformation');
			},
			confirm() {
				this.area_show = false
			},
			cancel() {
				this.area_show = false
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				uni.$u.toast('倒计时结束');
			},
			start() {
				uni.$u.toast('倒计时开始');
			},
			// handleStorePhotosChange(e) {
			// 	uni.uploadFile({
			// 		url: '/api/file/upload',
			// 		filePath: e.tempFilePaths[0],
			// 		name: 'file',
			// 		success: (res) => {
			// 			//console.log(res.data);
			// 			const imgUrls = JSON.parse(res.data);
			// 			this.shopForm.perCardid = imgUrls.data.url;
			// 			//this.selectedImg是我定义的获取文件的属性，每个用逗号隔开。
			// 			//console.log(this.perCardid);
			// 		},
			// 		fail: (err) => {
			// 			console.error("上传失败", err);
			// 			uni.showToast({
			// 				title: "上传失败",
			// 				icon: "none",
			// 			});
			// 		},
			// 	});
			// },


		}
	}
</script>

<style lang="scss">
	.head-2 {
		position: absolute;
		background-color: #3183FB;
		width: 100%;
		height: 250px;
		overflow: auto;
		z-index: 0;

	}

	.head {
		position: fixed;
		background-color: #3183FB;
		width: 100%;
		height: 80px;
		overflow: auto;
		z-index: 3;

		.u-icon {
			position: fixed;
			top: 4vh;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding: 30rpx 25rpx;
		background-color: white;
		width: 90vw;
		// height: 45vh;
		margin: 0 auto;
		margin-bottom: 2vh;
		transform: translateY(12vh);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
		border-radius: 16rpx;

		.business_text {
			line-height: 50rpx;
			color: #8a8a8a;
			font-size: 26rpx;
		}

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;

			text {
				font-size: 28rpx;
				line-height: 75rpx;
			}

			.input_view {}
		}

		.img_view {
			display: flex;

			.bg_img {
				width: 150rpx;
				height: 150rpx;
				background-color: #eaeaea;
				margin-right: 20rpx;
				border-radius: 20rpx;
				position: relative;

				image {
					max-width: 100%;
					max-height: 80%;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
		}
	}

	.bottom {
		height: 6vh;
		width: 70vw;
		margin: 0 auto;
		// transform: translateY(-22vh);
		background-color: #0662E6;
		border-radius: 60rpx;
		transform: translateY(14vh);
	}

	.container {
		padding-bottom: 17vh;
		box-sizing: border-box;
	}
</style>